{% extends 'store_admin/account/base_subscription.html' %}
{% load i18n %}

{% block t_overview %}current_tab{% endblock %}

{% block main %}
<h2>{% trans "Subscription Overview" %}</h2>

<div class="grid_16 margin_v padding_v">

<script type="text/javascript">
$(document).ready(function(){
	$("#dialog-confirm").dialog(
		{
		autoOpen: false, 
		modal: true,
		resizable: false,
		draggable: false,
		width: 350,
		heigth: 300,
		buttons: { 
				"Cancel": function() { $(this).dialog("close"); },
				"Confirm": function() { window.location = "{% url shop_cancel_subscription shop.id %}" ; },
			} 
		}
	);
	
	$("#cancel_subscription").click(function(event){
		event.preventDefault();
		$("#dialog-confirm").dialog("open");
	});
	
});
</script>

<div id="dialog-confirm" title="Confirm your action please...">
	<div class="grid_2"><img src="{{ MEDIA_URL }}img/warning.png" style="margin: 5px;" width="60" height="50"/></div>
	<h5>Your subscription will be cancelled and all your account data will be removed. Are you sure you want to unsubscribe?</h5>
</div>

{% if subscription %}
		
	<h3><u>{% trans "Subscription" %}</u></h3>
	<div class="grid_4 alpha omega">{% trans "Created on" %}:</div><div>{{ subscription.date_time }}</div>
	<div class="grid_4 alpha omega">{% trans "Subscription ID" %}:</div><div>{{ subscription.subscription_id }}</div>
	<div class="grid_4 alpha omega">{% trans "Status" %}:</div><div>{{ subscription.get_status }}</div>
	<div class="grid_4 alpha omega">{% trans "Plan ID" %}:</div><div>{{ subscription.plan.plan_id }}</div>
	<div class="grid_4 alpha omega">{% trans "Plan Name" %}:</div><div>{{ subscription.plan.name }}</div>
	<div class="grid_4 alpha omega">{% trans "Plan Description" %}:</div><div>{{ subscription.plan.description }}</div>
	{% comment %}
	<div class="grid_4 alpha omega">{% trans "Billing Period Start Date" %}:</div><div>{{ subscription.extra_data.0 }}</div>
	<div class="grid_4 alpha omega">{% trans "Billing Period End Date" %}:</div><div>{{ subscription.extra_data.1 }}</div>
	<div class="grid_4 alpha omega">{% trans "Next Billing Date" %}:</div><div>{{ subscription.extra_data.2 }}</div>
	<div class="grid_4 alpha omega">{% trans "Price" %}:</div><div>US$ {{ subscription.extra_data.3 }}</div>
	{% endcomment %}
	<div class="grid_4 alpha omega">{% trans "Price" %}:</div><div>US$ {{ subscription.plan.price }}</div>
	<br></br>
	<br></br>
	
	{% comment %}
	<br></br>
	<br></br>
	
	<h3><u>{% trans "Related Transactions" %}</u></h3>
	{% for transaction in subscription.extra_data.4 %}
		{{ transaction.id }} - {{ transaction.status }} - {{ transaction.amount }}
	{% endfor %}
	{% endcomment %}
	
	<div class="clear"></div>
	<br></br>
	{% if subscription.is_active %}
		<div id="cancel_subscription" class="awesome small">{% trans "Cancel Subscription" %}</div>
	{% endif %}	
{% else %}
	<div><h3>{% trans "No subscription found." %}</h3></div>
{% endif %}
</div>
	
<div class="clear"></div>
{% endblock %}